<template>
    <div class="userInfoDetail">
        <!-- <h3>用户信息</h3> -->
        <AreaTitleWarp :title="'用户信息'"></AreaTitleWarp>

        <!-- 信息展示 -->
        <el-row class="basic">
          <el-col :span="24">
            <div class="baseInfo-warpper">
              <div class="baseInfo-main">
                <ul class="baseInfo-flex-ul">
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">手机号：</span>
                    <span class="baseInfo-line-data">{{ userInfo.mobile }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">注册时间：</span>
                    <span class="baseInfo-line-data">{{ userInfo.regtime }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">姓名：</span>
                    <span class="baseInfo-line-data">{{ userInfo.realname  }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">性别：</span>
                    <span class="baseInfo-line-data">{{ userInfo.sex | filter_sex }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">身份证后6位：</span>
                    <span class="baseInfo-line-data">{{ userInfo.idcard  }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">居住地址：</span>
                    <span class="baseInfo-line-data">{{ userInfo.livePlace }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">单位名称：</span>
                    <span class="baseInfo-line-data">{{ userInfo.companyName }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">单位地址：</span>
                    <span class="baseInfo-line-data">{{ userInfo.workPlace == "null null" ? "--" : userInfo.workPlace }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">绑卡银行：</span>
                    <span class="baseInfo-line-data">{{ userInfo.bankName }}</span>
                  </li>
                  <li class="baseInfo-flex-li">
                    <span class="baseInfo-line-title">银行卡号：</span>
                    <span class="baseInfo-line-data">{{ userInfo.bankNum  }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>



        <userDebitList :queryMsg="queryMsg" :message="userInfo"></userDebitList>

    </div>
</template>
<script>
  import userDebitList from '../../userInfo/uesrDebitList.vue'
    export default {
        props:['queryMsg'],

        data(){
            return{
                userInfo:[],
                userInfoLoading: false,
            }
        },
        components:{
          userDebitList,
        },
        methods:{
          getUserBaseInfo(){
            let that = this;
            that.userInfoLoading = true;
            that.ajaxJson({
              url: '/user/simpleUserDetail',
              data: {
                userId: that.queryMsg.userId,
              },
              success: function (data) {
                if (data.code == '0') {
                  that.userInfo = data.data
                }
                that.userInfoLoading = false;
              }
            })
          },
        },
        filters: {
          filter_sex: function (value) {
            switch (value){
              case '0':
              case 0 :
                  return '男';
              case 1:
                  return '女';
              case -1:
                  return '未知';
              default:
                  return '';
            }
          }
        },
        created(){
          let that = this;
          that.getUserBaseInfo()

        }
    }
</script>
<style lang="less">
.userInfoDetail{
  padding-top: 20px;
}
  .baseInfo-warpper {
      background: #fff;
      border-radius: 4px;
      .baseInfo-main {
        .baseInfo-name {
          font-size: 20px;
          color: #333333;
          text-align: center;
        }
        .baseInfo-flex-ul {
          padding:20px;
          overflow: hidden;
          .baseInfo-flex-li{
            width:50%;
            float:left;
            display:flex;
            line-height: 30px;
            .baseInfo-line-data {
              font-size: 16px;

              color: #333333;
              margin-bottom: 6px;
            }
            .baseInfo-line-title{
              font-size: 14px;
              color: #999999;
            }
          }
        }
      }
    }
</style>
